<template>
    <!-- 歌单 -->
    <div class="playlist container">
        <div class="playlist_box">
            <el-card class="box-card">
                <div
                    class="title"
                    @click="dropdownMenu"
                >
                    {{ currentCat }}
                    <i class="el-icon-arrow-down el-icon--right"></i>

                </div>

                <!-- 热门标签 -->
                <div class="hot-tabs flex-row">
                    <div>热门标签：</div>
                    <ul class="flex-center">
                        <li
                            v-for="item of hotTags"
                            :key="item.id"
                            :class="currentCat == item.name ? 'active' : ''"
                            @click="chooseTag(item.name)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
                <!-- 分类 -->
                <div class="type flex-row">
                    <div
                        class="item"
                        :class="sortType == 'hot' ? 'active' : ''"
                        @click="chooseType('hot')"
                    >
                        热门
                    </div>
                    <div
                        class="item"
                        :class="sortType == 'new' ? 'active' : ''"
                        @click="chooseType('new')"
                    >
                        最新
                    </div>
                </div>
            </el-card>

            <!-- 下拉菜单 -->
            <transition name="fade">
                <el-card
                    class="dropdown-item"
                    v-if="showDropdownMenu"
                >
                    <div
                        class="item"
                        v-for="item of cateList"
                        :key="item.key"
                    >
                        <h2>
                            <i
                                class="iconfont"
                                :class="item.icon"
                            ></i>{{ item.type }}
                        </h2>
                        <ul>
                            <li
                                :class="currentCat == sub.name ? 'active' : ''"
                                v-for="sub of item.list"
                                :key="sub.name"
                                @click="chooseCat(sub.name)"
                            >
                                {{ sub.name }}
                            </li>
                        </ul>
                    </div>
                </el-card>
            </transition>
            <!-- 歌单列表 -->
            <div
                class="list_box"
                v-loading="loading"
                element-loading-background="#fff"
            >
                <song-sheet
                    class="list"
                    :sheetList="playList"
                >
                </song-sheet>
            </div>

            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="limit"
                layout="total, prev, pager, next"
                :total="pageTotal"
                background
                hide-on-single-page
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
import songSheet from '@/components/common/songSheet/Index'
export default {
    data() {
        return {
            showDropdownMenu: false,
            currentCat: '全部',
            typeList: [
                {
                    key: 0,
                    value: '语种',
                    icon: 'niceyuyan'
                },
                {
                    key: 1,
                    value: '风格',
                    icon: 'nicefengge'
                },
                {
                    key: 2,
                    value: '场景',
                    icon: 'nicekafeidengdai'
                },
                {
                    key: 3,
                    value: '情感',
                    icon: 'niceqingganqingshu'
                },
                {
                    key: 4,
                    value: '主题',
                    icon: 'nicepifugexinghuazhuti-xianxing'
                }
            ],
            hotTags: [],  //热门标签
            cateList: [], //分类名称
            categories: {},
            playList: [], //歌单列表
            pageTotal: 0,  //总数量
            currentPage: 0,
            limit: 40,
            offset: 0,
            sortType: 'hot',
            loading: false // 是否显示加载动画
        }
    },
    components: {
        songSheet,
    },
    created() {
        let cat = this.$route.query.cat
        // console.log(cat)
        if (cat) {
            this.currentCat = cat
        }
        this.getCatList()
        this.getHotlist()
        this.getPlayList()

    },
    methods: {
        // 下拉菜单的显示与隐藏
        dropdownMenu() {
            this.showDropdownMenu = !this.showDropdownMenu;
        },

        // 获取歌单分类
        async getCatList() {
            const { data: res } = await this.$api.getCatList()
            if (res.code !== 200) {
                return this.message.error('获取歌单分类失败！');
            }
            // console.log(res);
            this.cateList = this.categoryGroup(res.sub, 'category')
        },
        // 获取热门歌单分类
        async getHotlist() {
            const { data: res } = await this.$api.getHotlist()
            if (res.code !== 200) {
                return this.message.error('获取热门歌单分类失败！');
            }
            // console.log(res);
            this.hotTags = res.tags
        },
        // 选择热门标签
        chooseCat(cat) {
            this.currentCat = cat
            setTimeout(() => {
                this.showDropdownMenu = !this.showDropdownMenu;
                this.getPlayList()

            }, 300)
        },
        chooseTag(cat) {
            this.currentCat = cat
            this.getPlayList()

        },
        // 选择最新或者热门
        chooseType(type) {
            this.sortType = type
            this.getPlayList()
        },
        // 根据分类进行分组
        categoryGroup(list, category) {
            var obj = {}
            for (var i = 0; i < list.length; i++) {
                for (let item in list[i]) {
                    if (item == category) {
                        obj[list[i][item]] = {
                            list: obj[list[i][category]] ? obj[list[i][category]].list : []
                        }
                    }
                }
                obj[list[i][category]].list.push(list[i])
            }
            var att = []

            for (let item in obj) {
                let type = ''
                let category = ''
                let icon = ''
                this.typeList.map(i => {
                    if (i.key == obj[item].list[0].category) {
                        type = i.value
                        category = i.key
                        icon = i.icon
                    }
                })
                att.push({
                    type,
                    category,
                    icon,
                    list: obj[item].list
                })
            }
            return att
        },
        // 获取歌单 默认全部
        async getPlayList() {
            this.loading = true
            let param = {
                order: this.sortType,
                cat: this.currentCat,
                limit: this.limit,
                offset: this.offset
            }
            const { data: res } = await this.$api.getPlayList(param)
            if (res.code !== 200) {
                return this.message.error('获取歌单失败！');
            }
            // console.log(res);
            this.playList = res.playlists
            this.pageTotal = res.total
            this.loading = false

        },
        // 分页
        // pageSize 改变时会触发
        handleSizeChange(val) {
            this.limit = val
            this.offset = this.limit * this.currentPage
            this.getPlayList()
        },
        // currentPage 改变时会触发
        handleCurrentChange(val) {
            this.currentPage = val
            this.offset = (val - 1) * this.limit
            this.getPlayList()
        },
    },
}
</script>

<style lang="less" scoped>
.playlist_box {
    margin: 0 10px;
    min-width: 1080px;

    .box-card {
        height: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        border-radius: 5px;
        position: relative;
        .title {
            position: relative;
            top: 6px;
            width: auto;
            height: 40px;
            line-height: 40px;
            margin-right: 15px;
            padding: 0 5px 0 12px;
            background: #fa2800;
            border-radius: 5px 0px 5px 5px;
            color: #ffffff;
            cursor: pointer;
        }
    }
    &:hover {
        cursor: pointer;
    }
    .dropdown-item {
        margin-top: -15px;
        width: 720px;
        height: 400px;
        overflow-y: scroll;
        z-index: 100;
        position: absolute;
        padding: 15px;
        .item {
            margin-bottom: 15px;
            h2 {
                margin-bottom: 15px;
                font-size: 15px;
                color: #161e27;
                i {
                    margin-right: 8px;
                    font-size: 20px;
                }
            }
            ul li {
                display: inline-block;
                cursor: pointer;
                padding: 10px 20px;
                background: #f7f7f7;
                border-radius: 16px;
                margin: 0 10px 10px 0;
                cursor: pointer;
                font-size: 12px;
                color: #161e27;
                &:hover {
                    color: #666;
                }
                &.active {
                    color: #fff;
                    background: #fa2800;
                }
            }
        }
    }
    .hot-tabs {
        position: absolute;
        top: 10px;
        left: 110px;
        font-size: 12px;
        color: #161e27;
        ul li {
            text-align: center;
            margin-left: 25px;
            cursor: pointer;
            &:hover {
                color: #666;
            }
            &.active {
                color: #fa2800;
            }
        }
    }
    .type {
        position: absolute;
        top: 7px;
        right: 10px;

        .item {
            width: 50px;
            height: 25px;
            line-height: 25px;
            background: #f7f7f7;
            margin-right: 10px;
            border-radius: 10px;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
            &:hover {
                color: #666;
            }
            &.active {
                background: #fa2800;
                color: #fff;
            }
        }
    }
    .list_box {
        padding-top: 10px;
    }
    .list {
        margin-left: -6px;
    }
}
</style>